<template>
  <div class="app-container">
    <div class="search-container">
      <div class="search-container-left">
        <h2>{{ route.meta.title }}</h2>
        <el-button-group>
          <el-button
            :type="activeTime === item.value ? 'primary' : 'default'"
            v-for="item in timeSelect"
            :key="item.value"
            @click="handleChangeTime(item.value)"
          >
            {{ item.label }}
          </el-button>
        </el-button-group>
      </div>
      <div class="search-container-right">
        <el-button
          type="primary"
          :icon="Edit"
          @click.stop="handleEditVisible()"
        >
          添加
        </el-button>
        <!-- <el-upload
          class="upload-demo"
          :action="action"
          accept=".xlsx,.xls"
          :show-file-list="false"
          :on-success="handleQuery"
        >
          <el-button type="primary" :icon="Upload">导入</el-button>
        </el-upload> -->
        <el-button type="danger" :icon="Delete" @click.stop="handleDelete()">
          删除
        </el-button>
      </div>
    </div>

    <el-card shadow="never" class="table-container">
      <el-table
        ref="dataTableRef"
        v-loading="loading"
        :data="list"
        highlight-current-row
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column
          v-for="item in column.filter((item) => item.prop !== 'file_list')"
          :key="item.prop"
          :label="item.label"
          :prop="item.prop"
          show-overflow-tooltip
        />
        <el-table-column fixed="right" label="操作" align="center" width="120">
          <template #default="scope">
            <el-button
              type="danger"
              link
              size="small"
              @click.stop="handleDelete(scope.row)"
            >
              删除
            </el-button>
            <el-button
              type="primary"
              link
              size="small"
              @click.stop="handleEditVisible(scope.row)"
            >
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-if="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
      />
    </el-card>

    <InternalEdit
      v-model:dialog="dialog"
      :formData="formData"
      :rules="rules"
      :column="column"
      @refreshList="handleQuery"
    ></InternalEdit>
  </div>
</template>

<script setup>
import InternalEdit from "./internalEdit.vue";

import { Edit, Upload, Delete } from "@element-plus/icons-vue";

const props = defineProps({
  loading: {
    type: Boolean,
    default: false,
  },
  total: {
    required: true,
    type: Number,
    default: 0,
  },
  queryParams: {
    required: true,
    type: Object,
    default() {
      return {
        pageNum: 1,
        pageSize: 10,
      };
    },
  },
  list: {
    required: true,
    type: Array,
    default() {
      return [];
    },
  },
  column: {
    required: true,
    type: Array,
    default() {
      return [];
    },
  },
});
const emit = defineEmits([
  "handleChangeTime",
  "handleQuery",
  "handleSelectionChange",
  "handleDelete",
  "update:total",
  "update:queryParams",
]);

import { reactive, ref } from "vue";
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();

const action = ref(
  "https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
);

const timeSelect = ref([
  { label: "全部", value: 1 },
  { label: "最近一周", value: 2 },
  { label: "最近一个月", value: 3 },
  { label: "最近三个月", value: 4 },
  { label: "最近一年", value: 5 },
]);
const activeTime = ref(1);
// 编辑框
const dialog = reactive({
  title: "",
  visible: false,
});
// 编辑表单
const formData = reactive({
  record_date: `${new Date().getFullYear()}-${new Date().getMonth()+1}-${new Date().getDate()}`, //发生时间
  title: "", //标题
  details: "", //详情
  file_list: [], //附件
  remark: "", //备注
});
const rules = reactive({
  record_date: [{ required: true, message: "请选择发生时间", trigger: "blur" }],
  title: [{ required: true, message: "请输入标题", trigger: "blur" }],
});

// 切换时间
function handleChangeTime(value) {
  activeTime.value = value;
  emit("handleChangeTime", value);
}
// 获取列表
function handleQuery() {
  emit("handleQuery");
}
// 多选
function handleSelectionChange(selection) {
  emit("handleSelectionChange", selection);
}
// 删除
function handleDelete(row) {
  emit("handleDelete", row?.id || null);
}
// 编辑框显示
function handleEditVisible(row) {
  Object.assign(formData, row);
  if(!formData.file_list) {
    formData.file_list = []
  }
  dialog.title = row ? "编辑" : "添加";
  dialog.visible = true;
}
</script>
<style lang="scss" scoped>
.search-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  &-left {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  &-right {
    display: flex;
    gap: 10px;
  }
}
</style>
